﻿<table id="tweet-table">
    <tr>
        <td>
            <span class="field-validation-valid">
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <textarea class="text-box multi-line"
                      rows="2" id="Message" name="Message"></textarea>
        </td>
        <td>
            <button id="new-tweet-button" type="submit" style="font-size: 18px;
                padding: 6px 15px 6px 15px; cursor: pointer; margin-left: -6px; ">
                Tweet Now</button>
        </td>
    </tr>
</table>
<script type="text/javascript">
    $( '#new-tweet-button' ).click( function ( e )
    {
        var message = $( '#Message' ),
            tTable = $( '#tweet-table' );
        if ( message.val().length < 1 )
        {
            message.focus();
            e.preventDefault();
            return;
        }

        tTable.block( { message: 'tweeting....', css: { 'padding': '20px', 'font-size': '20px',
            'border-bottom-left-radius': '6px 6px',
            'border-bottom-right-radius': '6px 6px',
            'border-top-left-radius': '6px 6px',
            'border-top-right-radius': '6px 6px',
            'box-shadow': '0 0 1px black',
            '-webkit-box-shadow': '0 0 1px black',
            '-moz-box-shadow': '0 0 1px black'
        }
        } );

        $.ajax( {
            url: domainName + '/tweet/new',
            type: 'POST',
            async: false,
            data: "message=" + message.val(),
            success: function ( result )
            {
                if ( result.IsSuccess === false )
                {
                    message.focus();
                    alert( result.Message );
                    tTable.unblock();
                    e.preventDefault();
                }
                else
                {
                    message.val( '' );
                    tTable.unblock();
                }
            },
            error: function ()
            {
                message.css( 'border-color', 'red' );
                tTable.unblock();
            }
        } );
    } );
</script>